<template>
  <div class="home">
    <!--热门歌单-->
    <div class="section">
      <el-row class="search-category" :gutter="10" type="flex">
        <span class="el-tag-label">分类：</span>
        <el-col :span="20">
          <el-tag class="el-tag-item" v-for="category in categoryList"
                  :key="category.id"
                  round :effect="categoryActiveName === category.categoryName ? 'dark' : 'plain'"
                  :hit="categoryActiveName === category.categoryName"
                  @click="categoryClick(category)">
            {{ category.categoryName }}
          </el-tag>
        </el-col>
      </el-row>
      <el-row class="search-industry" :gutter="10" type="flex">
        <span class="el-tag-label">行业：</span>
        <el-col :span="20">
          <el-tag class="el-tag-item" v-for="industry in industryList"
                  :key="industry.id"
                  round :effect="industryActiveName === industry.industryName ? 'dark' : 'plain'"
                  :hit="industryActiveName === industry.industryName"
                  @click="industryClick(industry)">
            {{ industry.industryName }}
          </el-tag>
        </el-col>
      </el-row>
      <el-row class="search-platform" :gutter="10" type="flex">
        <span class="el-tag-label">流量平台：</span>
        <el-col :span="20">
          <el-tag class="el-tag-item" v-for="platform in platformList"
                  :key="platform.id"
                  round :effect="platformActiveName === platform.platformName ? 'dark' : 'plain'"
                  :hit="platformActiveName === platform.platformName"
                  @click="platformClick(platform)">
            {{ platform.platformName }}
          </el-tag>
        </el-col>
      </el-row>
      <el-row class="search-keyword" v-show="loginIn">
        <el-input class="search-input" v-model="keyword" placeholder="请输入内容"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="goSearch()">搜索</el-button>
      </el-row>
      <content-list :contentList="songList" path="song-list-album"></content-list>
      <el-pagination class="mpage"
                     v-show="loginIn"
                     background
                     layout="total, sizes, prev, pager, next, jumper"
                     :current-page="currentPage"
                     :page-size="pageSize"
                     :page-sizes="[10, 20, 50, 100]"
                     @current-change=handleCurrentChange
                     @size-change=handleSizeChange
                     :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import Swiper from '../components/Swiper'
import ContentList from '../components/ContentList'
import {getCategoryList, getIndustryList, getSongList, getPlatformList} from '../api/index'
import SignUpPage from './SignUp'
import {mapGetters} from 'vuex'

export default {
  name: 'home',
  components: {
    SignUpPage,
    Swiper,
    ContentList
  },
  data () {
    return {
      categoryActiveName: '',
      categoryActiveId: null,
      industryActiveName: '',
      industryActiveId: null,
      platformActiveName: '',
      platformActiveId: null,
      categoryList: [],
      industryList: [],
      platformList: [],
      songList: [],
      keyword: '',
      currentPage: 1,
      total: 0,
      pageSize: 20
    }
  },
  computed: {
    ...mapGetters([
      'userId',
      'activeName',
      'username',
      'loginIn'
    ])
  },
  created () {
    this.getSongList(this.currentPage, this.pageSize)
    this.getIndustryList()
    this.getCategoryList()
    this.getPlatformList()
  },
  methods: {
    getSongList (currentPage, pageSize) {
      let params = {
        currentPage: currentPage,
        pageSize: pageSize,
        categoryId: this.categoryActiveId,
        industryId: this.industryActiveId,
        keyWord: this.keyword,
        platformId: this.platformActiveId
      }
      let authorization = ''
      let _this = this
      let token = _this.$store.getters.token
      if (token) {
        authorization = token
      }

      let headers = {'Authorization': authorization}
      getSongList(params, headers)
        .then(res => {
          this.songList = res.data.records
          this.currentPage = res.data.current
          this.total = res.data.total
          this.pageSize = res.data.size
        })
        .catch(err => {
          console.log(err)
        })
    },

    getIndustryList () {
      getIndustryList().then(res => {
        this.industryList = res.data
      }).catch(error => {
        console.log(error)
      })
    },

    getCategoryList () {
      getCategoryList().then(res => {
        this.categoryList = res.data
      }).catch(error => {
        console.log(error)
      })
    },

    getPlatformList () {
      getPlatformList().then(res => {
        this.platformList = res.data
      }).catch(error => {
        console.log(error)
      })
    },

    categoryClick (item) {
      if (item.id === this.categoryActiveId && item.categoryName === this.categoryActiveName) {
        this.categoryActiveId = null
        this.categoryActiveName = ''
      } else {
        this.categoryActiveId = item.id
        this.categoryActiveName = item.categoryName
      }
      this.goSearch()
    },

    industryClick (item) {
      if (item.id === this.industryActiveId && item.industryName === this.industryActiveName) {
        this.industryActiveId = null
        this.industryActiveName = ''
      } else {
        this.industryActiveId = item.id
        this.industryActiveName = item.industryName
      }
      this.goSearch()
    },

    platformClick (item) {
      if (item.id === this.platformActiveId && item.platformName === this.platformActiveName) {
        this.platformActiveId = null
        this.platformActiveName = ''
      } else {
        this.platformActiveId = item.id
        this.platformActiveName = item.platformName
      }
      this.goSearch()
    },

    goSearch () {
      this.getSongList(this.currentPage, this.pageSize)
    },

    handleSizeChange (pageSize) {
      this.getSongList(this.currentPage, pageSize)
    },
    handleCurrentChange (currentPage) {
      this.getSongList(currentPage, this.pageSize)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/home.scss';
</style>
